<html>
    <head>
        <title>Itowns Examples</title>
        <link rel="stylesheet" type="text/css" href="/css/style.css">
        <style type="text/css">
            iframe {
                width: 300px;
                height: 200px;
                border: none;
            }
            .exampleContainer {
                width: 350px;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <h1>Itowns Examples</h1>
        <p>
        (click on title to open fullscreen)
        </p>
        <div id="error-nowebgl"></div>
        <div class="exampleContainer">
            <h3><a href='./orthographic.html' target='_blank'>Orthographic</a></h3>
            <img src='screenshots/orthographic.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./pointcloud.html' target='_blank'>Pointcloud</a></h3>
            <img src='screenshots/pointcloud.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./planar.html' target='_blank'>Planar mode</a></h3>
            <img src='screenshots/planar.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./globe.html' target='_blank'>Globe</a></h3>
            <img src='screenshots/globe.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./postprocessing.html' target='_blank'>Post processing</a></h3>
            <img src='screenshots/postprocessing.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./3dtiles.html' target='_blank'>3d tiles</a></h3>
            <img src='screenshots/3dtiles.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./multiglobe.html' target='_blank'>Multiple globes</a></h3>
            <img src='screenshots/multiglobe.jpg' target='_blank'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./layersColorVisible.html' target='_blank'>Layer visibility</a></h3>
            <img src='screenshots/globe.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./split.html' target='_blank'>Splitted rendering</a></h3>
            <img src='screenshots/split.jpg' target='_blank'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./cubic_planar.html' target='_blank'>Layers transformations</a></h3>
            <img src='screenshots/cubic_planar.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./wfs.html' target='_blank'>WFS data with reprojection</a></h3>
            <img src='screenshots/wfs.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./gpx.html' target='_blank'>Gpx</a></h3>
            <img src='screenshots/gpx.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./positionGlobe.html' target='_blank'>Position a mesh</a></h3>
            <img src='screenshots/position.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./globe_vector.html' target='_blank'>globe with data vector</a></h3>
            <img src='screenshots/globe_vector.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./planar_vector.html' target='_blank'>Plane mode with data vector</a></h3>
            <img src='screenshots/planar_vector.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./globe_wfs_extruded.html' target='_blank'>WFS extruded on globe</a></h3>
            <img src='screenshots/globe_wfs_extruded.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <div class="exampleContainer">
            <h3><a href='./panorama.html' target='_blank'>Panoramas</a></h3>
            <img src='screenshots/panorama.jpg'>
            <iframe src="" style="display: none;"></iframe>
        </div>
        <script src="https://unpkg.com/three@0.86.0/examples/js/Detector.js"></script>
        <script type="text/javascript">
            if (!Detector.webgl) {
                Detector.addGetWebGLMessage({ parent: document.getElementById('error-nowebgl') });
            } else {
                function enableOnClick(evt) {
                    this.getElementsByTagName('img')[0].style.display = 'none';
                    this.getElementsByTagName('iframe')[0].style.display = '';
                    this.getElementsByTagName('iframe')[0].src = this.getElementsByTagName('a')[0].href;
                }

                    var divs = document.getElementsByClassName('exampleContainer');
                    var i;
                    for (i=0; i<divs.length; i++) {
                        divs[i].addEventListener('click', enableOnClick.bind(divs[i]));
                }
            }
        </script>
    </body>
</html>
